<template>
  <div class="box">
    <div class="boxleft">
      <div class="basic-info-part">
        <titlemessage list="IDC资源基本情况"></titlemessage>
        <div class="IDC-basic-info">
          <square-section
            v-for="(item, index) in basicInfoList"
            :key="index"
            :src="item.src"
            :num="item.num"
            :text="item.text"
            :w="216"
          />
        </div>
        <div class="chart" style="width: 90%; height: 230px">
          <TestEcharts :option="optionBasic" />
        </div>
      </div>
      <div class="use-rate-part">
        <titlemessage list="机架使用率统计"></titlemessage>
        <div class="circle-rate-section">
          <circle-rate
            v-for="(item, index) in circleRateList"
            :key="index"
            :val="item.val"
            :text="item.text"
            :right="true"
          />
        </div>
        <div class="chart-bar" style="width: 100%; height: 320px">
          <TestEcharts :option="optionRate" />
        </div>
      </div>
    </div>
    <div class="boxCentenMap">
      <div class="map">
        <idcMap @handleClickBtn="tenantResources"></idcMap>
      </div>
      <div class="mapBottom">
        <titlemessage list="IDC接入端口带宽及峰值数据"></titlemessage>
        <div class="mapBottomList">
          <square-section
            v-for="(item, index) in idcData"
            :key="index"
            :src="item.src"
            :num="item.num"
            :text="item.text"
            :w="250"
            :yellow="index % 2 !== 0"
          />
        </div>
      </div>
    </div>
    <div class="boxRight">
      <div class="rightTopMessage">
        <titlemessage list="湖北联通用户访问top10应用排行榜"></titlemessage>
        <div class="visited-rank" style="width: 100%; height: 225px">
          <topTenTable
            :tableList="visitTabTh"
            :tableCentent="appAll"
          ></topTenTable>
        </div>
      </div>
      <div class="rightCenten">
        <titlemessage list="应用总体流量top10分布"></titlemessage>
        <div class="chart-pie" style="width: 100%; height: 200px">
          <TestEcharts :option="optionTotal" />
        </div>
      </div>
      <div class="rightBottom">
        <titlemessage list="单个应用流量top10分布"></titlemessage>
        <div class="lastSelest">
          <!-- <selectEl :options="() => [{ label: '抖音', value: 1 }]"></selectEl> -->
          <selectEl
            :selectList="topFIveSeLect"
            @handleClickBtn="seleceApplication"
          ></selectEl>
        </div>

        <div class="chart-pie" style="width: 100%; height: 200px">
          <!--          <tableCommpoents></tableCommpoents>-->
          <TestEcharts :option="applicationEcharts" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import TestEcharts from "../components/echarts.vue"; //封装图表组件
import titlemessage from "../components/titleMessage.vue"; //标题组件
import topTenTable from "../components/tableAllHome/topTenTable.vue"; //table表格组件
import iconBorder from "../components/iconBorder.vue"; //图标框组件
import radioBorder from "../components/radio.vue"; //圆框组件
import idcMap from "../components/idcMap.vue"; //3d地图组件
import selectEl from "../components/select.vue"; //封装后的下拉
import radio from "../components/radiobutton"; //封装的单选框
import SquareSection from "../components/squareSection";
import circleRate from "../components/circleRate";
import { getMachineRoom, getFlow, getTrafficRanking } from "../api/main"; //请求接口

import {
  ref,
  reactive,
  computed,
  getCurrentInstance,
  onMounted,
  watch,
  nexttick,
} from "vue";

//合作机架总使用率
let copperationUse = ref("");
//自有机架总使用率
let privateUse = ref("");
//自有机架
let privateFrame = ref("");
//合作机架
let cooperationFrame = ref("");
//机架使用率
let optionRateData = ref("");
//IDC接入端口带宽及峰值数据
let flow = ref("");
let sumBandwidth = ref("");
let exceedNum = ref("");
let useRate = ref("");
// 湖北联通用户访问top10应用排行榜
// let app = ref('')
// let flowRate = ref('')
// let innerRate = ref('')
let appList = ref([[], [], []]);
// 单个应用流量top10分布
let applicationList = ref("");
let appName = ref("");

let jijiaAll = ref(""); //机架接口总数据

let jijiDynamic = ref(""); //机架动态数据

let appAll = ref(""); //

let topFIveAll = ref([[], [], []]); //切换下拉数组

let topFIveSeLect = ref([[]]); //切换下拉数组

let liveList = ref([[], [], []]); //多个数组下拉菜单

//机房机架接口
getMachineRoom().then((res) => {
  jijiaAll.value = res.data; //赋值
  jijiDynamic.value = res.data[2]; //默认五月数据

  basicInfoList.value[1].num =
    parseInt(jijiDynamic.value.privateFrame) +
    parseInt(jijiDynamic.value.cooperationFrame); //总机架数量
  copperationUse.value = jijiDynamic.value.copperationUse;
  privateUse.value = jijiDynamic.value.privateUse;
  cooperationFrame.value = jijiDynamic.value.cooperationFrame; //合作机架
  privateFrame.value = jijiDynamic.value.privateFrame; //私有机架

  optionRateData.value = [
    jijiDynamic.value.lowUse,
    jijiDynamic.value.thirtyUse,
    jijiDynamic.value.fiveUse,
    jijiDynamic.value.sevenUse,
    jijiDynamic.value.ninetyUse,
  ];

  flow.value = jijiDynamic.value.flow;
  sumBandwidth.value = jijiDynamic.value.sumBandwidth;
  exceedNum.value = jijiDynamic.value.exceedNum + "个";
  useRate.value = jijiDynamic.value.useRate;
});

//动态选中月份
let month = ref("五月");

let tenantResources = (mess) => {
  month.value = mess;
  switch (mess) {
    case "三月":
      jijiDynamic.value = jijiaAll.value[0];
      appAll.value = appList.value[0];
      // applicationAnalysis.value = tiktok.value[0][0];
      topFIveSeLect.value = topFIveAll.value[0];

      break;
    case "四月":
      jijiDynamic.value = jijiaAll.value[1];
      appAll.value = appList.value[1];
      // applicationAnalysis.value = tiktok.value[1][0];
      topFIveSeLect.value = topFIveAll.value[1];

      break;
    case "五月":
      jijiDynamic.value = jijiaAll.value[2];
      appAll.value = appList.value[2];
      // applicationAnalysis.value = tiktok.value[2][0];
      topFIveSeLect.value = topFIveAll.value[2];

      break;
  }

  basicInfoList.value[1].num =
    parseInt(jijiDynamic.value.privateFrame) +
    parseInt(jijiDynamic.value.cooperationFrame); //总机架数量
  copperationUse.value = jijiDynamic.value.copperationUse;
  privateUse.value = jijiDynamic.value.privateUse;
  cooperationFrame.value = jijiDynamic.value.cooperationFrame; //合作机架
  privateFrame.value = jijiDynamic.value.privateFrame; //私有机架

  optionRateData.value = [
    jijiDynamic.value.lowUse,
    jijiDynamic.value.thirtyUse,
    jijiDynamic.value.fiveUse,
    jijiDynamic.value.sevenUse,
    jijiDynamic.value.ninetyUse,
  ];

  flow.value = jijiDynamic.value.flow;
  sumBandwidth.value = jijiDynamic.value.sumBandwidth;
  exceedNum.value = jijiDynamic.value.exceedNum + "个";
  useRate.value = jijiDynamic.value.useRate;
};

//单个应用流量top10分布
getFlow().then((res) => {
  // console.log(res.data);
  tiktok.value[0] = res.data.slice(0, 94);
  tiktok.value[1] = res.data.slice(95, 171);
  tiktok.value[2] = res.data.slice(172, 233);
  // appName.value = res.data[0].app;

  let demoListSeleCt = " ";

  let resAllThree = [];

  while (tiktok.value[0].length !== 0) {
    let list = tiktok.value[0].shift();
    let arr = [list];
    for (let i = 0; i < tiktok.value[0].length; i++) {
      if (tiktok.value[0][i].app === list.app) {
        arr = arr.concat(tiktok.value[0].splice(i, 1));
        i--;
      }
    }
    resAllThree.push(arr);
  }

  // //下拉数组
  demoListSeleCt = resAllThree.map((item) =>
    item.map((items) => ({
      value: items.app,
      label: items.app,
    }))
  );

  for (let i = 0; i < demoListSeleCt.length; i++) {
    for (let j = 0; j < demoListSeleCt[i].length; j++) {
      if (demoListSeleCt[i] === demoListSeleCt[j]) {
        liveList.value[0].push(demoListSeleCt[i][j]);
      }
    }
  }

  topFIveAll.value[0] = liveList.value[0];

  //筛选出对应对象
  resAllThree = resAllThree.map((item) =>
    item.map((items) => ({
      name: items.place,
      value: items.rate,
    }))
  );

  //去除 %
  tiktok.value[0] = JSON.parse(JSON.stringify(resAllThree).replace(/%/g, ""));

  let resAllFour = [];
  while (tiktok.value[1].length !== 0) {
    let list = tiktok.value[1].shift();
    let arr = [list];
    for (let i = 0; i < tiktok.value[1].length; i++) {
      if (tiktok.value[1][i].app === list.app) {
        arr = arr.concat(tiktok.value[1].splice(i, 1));
        i--;
      }
    }
    resAllFour.push(arr);
  }

  // //下拉数组
  demoListSeleCt = resAllFour.map((item) =>
    item.map((items) => ({
      value: items.app,
      label: items.app,
    }))
  );

  for (let i = 0; i < demoListSeleCt.length; i++) {
    for (let j = 0; j < demoListSeleCt[i].length; j++) {
      if (demoListSeleCt[i] === demoListSeleCt[j]) {
        liveList.value[1].push(demoListSeleCt[i][j]);
      }
    }
  }

  topFIveAll.value[1] = liveList.value[1];

  //筛选出对应对象
  resAllFour = resAllFour.map((item) =>
    item.map((items) => ({
      name: items.place,
      value: items.rate,
    }))
  );

  //去除 %
  tiktok.value[1] = JSON.parse(JSON.stringify(resAllFour).replace(/%/g, ""));

  let resAllFive = [];
  while (tiktok.value[2].length !== 0) {
    let list = tiktok.value[2].shift();
    let arr = [list];
    for (let i = 0; i < tiktok.value[2].length; i++) {
      if (tiktok.value[2][i].app === list.app) {
        arr = arr.concat(tiktok.value[2].splice(i, 1));
        i--;
      }
    }
    resAllFive.push(arr);
  }

  //下拉数组

  demoListSeleCt = resAllFive.map((item) =>
    item.map((items) => ({
      value: items.app,
      label: items.app,
    }))
  );

  for (let i = 0; i < demoListSeleCt.length; i++) {
    for (let j = 0; j < demoListSeleCt[i].length; j++) {
      if (demoListSeleCt[i] === demoListSeleCt[j]) {
        liveList.value[2].push(demoListSeleCt[i][j]);
      }
    }
  }

  topFIveAll.value[2] = liveList.value[2];

  //去重

  // for (let i = 0; i < topFIveAll.value[2].length; i++) {
  //   for (let j = 0; j < topFIveAll.value[2][i].length; j++) {
  //     if (topFIveAll.value[2][i] === topFIveAll.value[2][j]) {
  //       liveList.value[2].push(topFIveAll.value[2][i][j]);
  //     }
  //   }
  // }

  //筛选出对应对象
  resAllFive = resAllFive.map((item) =>
    item.map((items) => ({
      name: items.place,
      value: items.rate,
    }))
  );

  topFIveSeLect.value = topFIveAll.value[2];

  //去除 %
  tiktok.value[2] = JSON.parse(JSON.stringify(resAllFive).replace(/%/g, ""));

  applicationAnalysis.value = tiktok.value[2][0]; //默认五月数据
});

// //转换标准时间格式函数
// Date.prototype.Format = function (fmt) {
//   var o = {
//     "M+": this.getMonth() + 1, //月份
//     "d+": this.getDate(), //日
//     "h+": this.getHours(), //小时
//     "m+": this.getMinutes(), //分
//     "s+": this.getSeconds(), //秒
//   };
//   if (/(y+)/.test(fmt)) {
//     //根据y的长度来截取年
//     fmt = fmt.replace(
//       RegExp.$1,
//       (this.getFullYear() + "").substr(4 - RegExp.$1.length)
//     );
//   }
//   for (var k in o) {
//     if (new RegExp("(" + k + ")").test(fmt))
//       fmt = fmt.replace(
//         RegExp.$1,
//         RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
//       );
//   }
//   return fmt;
// };

//湖北联通用户访问top10应用排行榜
getTrafficRanking().then((res) => {
  // console.log(res.data);

  appList.value[0] = res.data.slice(0, 10); //3
  appList.value[1] = res.data.slice(10, 20); //4
  appList.value[2] = res.data.slice(20, 30); //5

  appAll.value = appList.value[2];

  // console.log("getTrafficRanking", res);
  // app.value = res.data[0].app;
  // flowRate.value = res.data[0].flowRate;
  // innerRate.value = res.data[0].innerRate;

  // appAll.value = res.data.splice(20, 30);

  // var afterData = [];
  // for (let n = 0; n < res.data.length; n++) {
  //   res.data[n].createTime = new Date(res.data[n].createTime).Format(
  //     "yyyy-MM-dd"
  //   );
  // }

  // let resAll = [];
  // while (res.data.length !== 0) {
  //   let list = res.data.shift();
  //   let arr = [list];
  //   for (let i = 0; i < res.data.length; i++) {
  //     if (res.data[i].age === list.age) {
  //       arr = arr.concat(res.data.splice(i, 1));
  //       i--;
  //     }
  //   }
  //   resAll.push(arr);
  // }

  // console.log(resAll);
});

let basicInfoList = ref([
  {
    src: "idc/total.png",
    num: "24",
    text: "机房总数（个）",
  },
  {
    src: "idc/total2.png",
    num: "",
    text: "机架总数（个）",
  },
]);

//下拉选项
// const topFIveAll = [
//   {
//     value: "抖音",
//     label: "抖音",
//   },
//   {
//     value: "腾讯视频",
//     label: "腾讯视频",
//   },
//   {
//     value: "快手",
//     label: "快手",
//   },
//   {
//     value: "华为云",
//     label: "华为云",
//   },
//   {
//     value: "阿里CDN",
//     label: "阿里CDN",
//   },
//   {
//     value: "腾讯CDN",
//     label: "腾讯CDN",
//   },
//   {
//     value: "字节跳动CDN",
//     label: "字节跳动CDN",
//   },
//   {
//     value: "腾讯应用",
//     label: "腾讯应用",
//   },
//   {
//     value: "百度CDN",
//     label: "百度CDN",
//   },
//   {
//     value: "今日头条",
//     label: "今日头条",
//   },
// ];

// const circleRateList = ref([
//   //单选框测试数据
//   {
//     val: "51.76%",
//     text: "自有机架总使用率",
//   },
//   {
//     val: "78.65%",
//     text: "合作机架总使用率",
//   },
// ]);

const circleRateList = ref([
  //单选框测试数据
  {
    val: privateUse,
    text: "自有机架总使用率",
  },
  {
    val: copperationUse,
    text: "合作机架总使用率",
  },
]);

// let idcData = ref([
//   {
//     src: "idc/wifi.png",
//     num: "5657G",
//     text: "全省IDC客户供接入带宽",
//   },
//   {
//     src: "idc/exit.png",
//     num: "4000G",
//     text: "全省IDC总出口",
//   },
//   {
//     src: "idc/people.png",
//     num: "5个",
//     text: "峰值利用率>90%的客户",
//   },
//   {
//     src: "idc/data.png",
//     num: "54%",
//     text: "本月峰值利用率",
//   },
// ]);
let idcData = ref([
  {
    src: "idc/wifi.png",
    num: sumBandwidth,
    text: "全省IDC客户共接入带宽",
  },
  {
    src: "idc/exit.png",
    num: flow,
    text: "全省IDC总出口",
  },
  {
    src: "idc/people.png",
    num: exceedNum,
    text: "峰值利用率>90%的客户",
  },
  {
    src: "idc/data.png",
    num: useRate,
    text: "本月峰值利用率",
  },
]);

let eData = [
  { value: 1048, name: "Search Engine" },
  { value: 735, name: "Direct" },
  { value: 580, name: "Email" },
  { value: 484, name: "Union Ads" },
  { value: 300, name: "Video Ads" },
];

// const getLinearColor = function(color1, color2, pos) {
//   const p = Object.assign({ x: 0.5, y: 0, x2: 0.5, y2: 1 }, pos)
//   return {
//     type: 'linear',
//     ...p,
//     colorStops: [
//       {
//         offset: 0,
//         color: color1
//       },
//       {
//         offset: 1,
//         color: color2
//       }
//     ],
//     global: false
//   }
// }
//
const optionBasic = reactive({
  title: {
    text: "机架类型",
    left: "center",
    bottom: "0",
    textStyle: {
      fontSize: 12,
      color: "#A2A5AC",
    },
  },
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    show: false,
  },
  color: [
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 1,
      y2: 1,
      colorStops: [
        { offset: 0, color: "#001C31" }, // 设置颜色渐变
        { offset: 1, color: "#FEC100" },
      ],
    },
    {
      type: "linear",
      x: 0,
      y: 0,
      x2: 1,
      y2: 1,
      colorStops: [
        { offset: 0, color: "#001C31" },
        { offset: 1, color: "#0181C9" },
      ],
    },
  ],
  series: [
    {
      name: "IDC资源",
      type: "pie",
      radius: ["40%", "50%"],
      label: {
        formatter: "{a|{b}}{abg|}\n{hr|}\n  {b|{c}}  {per|{d}%}",
        backgroundColor: "transparent",
        borderColor: "rgba(2, 140, 218, 0.5)",
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          a: {
            color: "#9DA4B1",
            fontSize: 14,
            lineHeight: 22,
            align: "center",
          },
          hr: {
            borderColor: "rgba(2, 140, 218, 0.5)",
            width: "100%",
            borderWidth: 1,
            height: 0,
          },
          b: {
            color: "#D6E3EA",
            fontSize: 14,
            fontWeight: "bold",
            lineHeight: 35,
          },
          per: {
            color: "#9DA4B1",
            // backgroundColor: '#4C5058',
            fontSize: 13,
            fontWeight: "bold",
            lineHeight: 35,
            padding: [3, 4],
            borderRadius: 4,
          },
        },
      },
      data: [
        { value: cooperationFrame, name: "合作机架" },
        { value: privateFrame, name: "自有机架" },
        // { value: 1520, name: "合作机架" },
        // { value: 1677, name: "自有机架" },
      ],
    },
  ],
});

const optionRate = reactive({
  title: {
    text: "机架使用率", //主标题
    itemGap: 15, //主副标题之间间距
    top: 20,
    textStyle: {
      //文字颜色
      color: "#8E939A",
      //字体风格,'normal','italic','oblique'
      fontStyle: "normal",
      //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
      fontWeight: "bold",
      //字体系列
      fontFamily: "sans-serif",
      //字体大小
      fontSize: 14,
    },
  },
  legend: {
    // top: 20,
    // right: 10,
    // icon: 'circle'
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    axisLine: { show: true },
    axisTick: { show: true },
    axisLabel: {
      interval: 0,
      // rotate: this.rotate
    },
    splitLine: {
      show: false,
    },
    boundaryGap: false,
  },
  yAxis: {
    type: "category",
    splitLine: {
      show: false,
    },
    data: ["30%以下", "30-50%", "50-70%", "70-90%", "90%以上"],
  },
  color: {
    type: "linear",
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      { offset: 0, color: "#002944" }, // 设置颜色渐变
      { offset: 1, color: "#028BD8" },
    ],
  },
  series: {
    type: "bar",
    barWidth: 16,
    label: {
      show: true,
      position: "right",
      textStyle: {
        color: "#D6E3EA",
        fontSize: 16,
      },
    },
    data: optionRateData,
    //  data: [9, 2, 4, 5, 4],
    itemStyle: {
      borderRadius: [0, 50, 50, 0],
    },
  },
});

//湖北联通用户访问top10应用排行榜头部
const visitTabTh = ref([
  {
    thName: "排名",
  },
  {
    thName: "应用",
  },
  {
    thName: "总体流量占比",
  },
  {
    thName: "省内IDC覆盖率",
  },
]);

//湖北联通用户访问top10应用排行榜内容
const visitRankData = ref([
  {
    tdNumber: "1",
    taName: "抖音",
    allVal: "22.91%",
    val: "79.87%",
  },
  {
    tdNumber: "2",
    taName: "腾讯视频",
    allVal: "9.06%",
    val: "64.41%",
  },
  {
    tdNumber: "3",
    taName: "快手",
    allVal: "8.03%",
    val: "87.01%",
  },
  {
    tdNumber: "4",
    taName: "华为云",
    allVal: "6.61%",
    val: "75.11%",
  },
  {
    tdNumber: "5",
    taName: "阿里CDN",
    allVal: "6.26%",
    val: "67.34%",
  },
  {
    tdNumber: "6",
    taName: "腾讯CDN",
    allVal: "5.3%",
    val: "62.91%",
  },
  {
    tdNumber: "7",
    taName: "字节跳动CDN",
    allVal: "4.18%",
    val: "67.02%",
  },
  {
    tdNumber: "8",
    taName: "腾讯应用",
    allVal: "3.52%",
    val: "67.97%",
  },
  {
    tdNumber: "9",
    taName: "百度",
    allVal: "2.3%",
    val: "36.85%",
  },
  {
    tdNumber: "10",
    taName: "今日头条",
    allVal: "2.05%",
    val: "91.45%",
  },
]);

//应用总体流量数据数组
const totalFlow = ref([
  { value: 69.92, name: "湖北联通IDC" },
  { value: 11.74, name: "湖南联通" },
  { value: 3.85, name: "河南联通" },
  { value: 2.45, name: "江西联通" },
  { value: 1.86, name: "安徽联通" },
  { value: 1.81, name: "江苏联通" },
  { value: 1.77, name: "山东联通" },
  { value: 0.84, name: "广东联通" },
  { value: 0.62, name: "陕西联通" },
  { value: 0.62, name: "浙江联通" },
]);

// 应用总体流量top10分布
const optionTotal = reactive({
  legend: {
    show: true,
    // top: 'right',
    orient: "vertical",
    right: 0,
    top: 50,
    bottom: 10,
    textStyle: {
      color: "#B0B0B0",
      fontSize: 12,
    },
    itemHeight: 6,
  },
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  color: [
    "#028AD7",
    "#EF6640",
    "#FFC100",
    "#627CFF",
    "#2CD6BB",
    "#70AD47",
    "#255E91",
    "#853D0C",
    "#636363",
    "#997300",
  ],
  series: {
    type: "pie",
    selectedMode: "single",
    center: ["40%", "50%"],
    radius: [24, 60],
    data:
      //  [
      //   { value: 38, name: "湖北联通" },
      //   { value: 32, name: "河南联通" },
      //   { value: 30, name: "湖南联通" },
      //   { value: 28, name: "江西联通" },
      //   { value: 26, name: "安徽联通" },
      // ]
      totalFlow,
    label: {
      normal: {
        color: "#B0B0B0",
        position: "outside",
        formatter: function (param) {
          return `{a|${param.name}}\n{b|${param.value}%}`;
        },
        rich: {
          a: {
            align: "center",
            fontSize: 12,
          },
          b: {
            align: "center",
            padding: [2, 0, 0, 0],
            fontSize: 14,
            color: "#FFF",
          },
        },
      },
    },
    itemStyle: {
      label: {
        show: true,
        textStyle: {
          fontWeight: 200,
          fontSize: 10, //⽂字的字体⼤⼩
          color: "#fff",
        },
      },
    },
  },
});

//抖音
// const tiktok = ref([
//   { value: 79.87, name: "湖北联通IDC" },
//   { value: 9.88, name: "湖南联通" },
//   { value: 5.28, name: "河南联通" },
//   { value: 1.53, name: "江苏联通" },
//   { value: 1.28, name: "浙江联通" },
//   { value: 0.88, name: "江西联通" },
//   { value: 0.49, name: "山东联通" },
//   { value: 0.28, name: "安徽联通" },
// ]);

let tiktok = ref([[], [], []]);

// //腾讯视频
// const tencent = ref([
//   { value: 68.41, name: "湖北联通IDC" },
//   { value: 9.45, name: "湖南联通" },
//   { value: 9.24, name: "安徽联通" },
//   { value: 6.8, name: "江西联通" },
//   { value: 2.24, name: "陕西联通" },
//   { value: 1.17, name: "重庆联通" },
//   { value: 0.77, name: "广东联通" },
// ]);

// //快手
// const kwai = ref([
//   { value: 87.01, name: "湖北联通IDC" },
//   { value: 5.8, name: "湖南联通" },
//   { value: 2.12, name: "河南联通" },
//   { value: 1.12, name: "江苏联通" },
//   { value: 0.86, name: "江西联通" },
//   { value: 0.61, name: "安徽联通" },
// ]);

// //华为云
// const huaWeiyun = ref([
//   { value: 75.11, name: "湖北联通IDC" },
//   { value: 15.41, name: "湖南联通" },
//   { value: 2.86, name: "河南联通" },
//   { value: 1.76, name: "山东联通" },
//   { value: 1.2, name: "华为云" },
//   { value: 0.91, name: "辽宁联通" },
// ]);

// //阿里CDN
// const ailCdn = ref([
//   { value: 67.34, name: "湖北联通IDC" },
//   { value: 16.36, name: "湖南联通" },
//   { value: 2.31, name: "山东联通" },
//   { value: 2.06, name: "北京联通" },
//   { value: 1.79, name: "安徽联通" },
//   { value: 1.6, name: "山西联通" },
//   { value: 1.46, name: "江西联通" },
//   { value: 1.2, name: "河南联通" },
//   { value: 1.06, name: "广东联通" },
//   { value: 1.05, name: "天津联通" },
// ]);

// //腾讯CDN
// const tencentCdn = ref([
//   { value: 62.91, name: "湖北联通IDC" },
//   { value: 11.79, name: "江西联通" },
//   { value: 8.52, name: "湖南联通" },
//   { value: 5.0, name: "江苏联通" },
//   { value: 1.61, name: "河南联通" },
//   { value: 1.6, name: "浙江联通" },
//   { value: 1.33, name: "四川联通" },
//   { value: 1.27, name: "山东联通" },
// ]);

// //腾讯应用
// const tencentApplication = ref([
//   { value: 67.97, name: "湖北联通IDC" },
//   { value: 9.49, name: "广东联通" },
//   { value: 5.66, name: "江西联通" },
//   { value: 5.4, name: "江苏联通" },
//   { value: 4.8, name: "湖南联通" },
//   { value: 2.24, name: "上海联通" },
//   { value: 1.65, name: "浙江联通" },
//   { value: 0.67, name: "四川联通" },
// ]);

// //字节跳动
// const byteRunout = ref([
//   { value: 64.02, name: "湖北联通IDC" },
//   { value: 11.48, name: "湖南联通" },
//   { value: 10.15, name: "山东联通" },
//   { value: 8.48, name: "河南联通" },
//   { value: 0.39, name: "江苏联通" },
//   { value: 0.38, name: "河北联通" },
// ]);

// //百度CDN
// const baiduCdn = ref([
//   { value: 36.85, name: "湖北联通IDC" },
//   { value: 19.92, name: "湖南联通" },
//   { value: 8.7, name: "海南联通" },
//   { value: 7.14, name: "江苏联通" },
//   { value: 6.74, name: "河南联通" },
//   { value: 5.6, name: "陕西联通" },
//   { value: 2.67, name: "广东联通" },
//   { value: 2.01, name: "河北联通" },
//   { value: 1.73, name: "安徽联通" },
//   { value: 1.2, name: "北京联通" },
//   { value: 1.19, name: "江西联通" },
// ]);

// //今日头条
// const todaysHeadlines = ref([
//   { value: 91.45, name: "湖北联通IDC" },
//   { value: 1.89, name: "湖南联通" },
//   { value: 1.48, name: "江西联通" },
//   { value: 1.01, name: "山西联通" },
//   { value: 0.81, name: "河南联通" },
//   { value: 0.76, name: "阿里云" },
//   { value: 0.57, name: "河北联通" },
// ]);

//应用分析动态数据
// const applicationAnalysis = ref(tiktok.value);
const applicationAnalysis = ref("");

//图表下拉切换动态赋值
const seleceApplication = (mess) => {
  //   case "抖音":
  //     applicationAnalysis.value = tiktok.value;
  //     break;
  //   case "腾讯视频":
  //     applicationAnalysis.value = tencent.value;
  //     break;
  //   case "快手":
  //     applicationAnalysis.value = kwai.value;
  //     break;
  //   case "华为云":
  //     applicationAnalysis.value = huaWeiyun.value;
  //     break;
  //   case "阿里CDN":
  //     applicationAnalysis.value = ailCdn.value;
  //     break;
  //   case "腾讯CDN":
  //     applicationAnalysis.value = tencentCdn.value;
  //     break;
  //   case "字节跳动CDN":
  //     applicationAnalysis.value = tencentApplication.value;
  //     break;
  //   case "腾讯应用":
  //     applicationAnalysis.value = byteRunout.value;
  //     break;
  //   case "百度CDN":
  //     applicationAnalysis.value = baiduCdn.value;
  //     break;
  //   case "今日头条":
  //     applicationAnalysis.value = todaysHeadlines.value;
  //     break;
  // }
  // switch (mess) {
  //   case "抖音":
  //     applicationAnalysis.value = tiktok.value;
  //     break;

  if (month.value == "五月") {
    switch (mess) {
      case "字节跳动CDN":
        applicationAnalysis.value = tiktok.value[2][0];
        break;
      case "金山云":
        applicationAnalysis.value = tiktok.value[2][1];
        break;
      case "腾讯CDN":
        applicationAnalysis.value = tiktok.value[2][2];
        break;
      case "阿里CDN":
        applicationAnalysis.value = tiktok.value[2][3];
        break;
      case "快手":
        applicationAnalysis.value = tiktok.value[2][4];
        break;
      case "腾讯视频":
        applicationAnalysis.value = tiktok.value[2][5];
        break;
      case "抖音":
        applicationAnalysis.value = tiktok.value[2][6];
        break;
    }
  } else if (month.value == "四月") {
    switch (mess) {
      case "腾讯CDN":
        applicationAnalysis.value = tiktok.value[1][0];
        break;
      case "阿里CDN":
        applicationAnalysis.value = tiktok.value[1][1];
        break;
      case "华为云":
        applicationAnalysis.value = tiktok.value[1][2];
        break;
      case "快手":
        applicationAnalysis.value = tiktok.value[1][3];
        break;
      case "腾讯视频":
        applicationAnalysis.value = tiktok.value[1][4];
        break;
      case "抖音":
        applicationAnalysis.value = tiktok.value[1][5];
        break;
      case "百度CDN":
        applicationAnalysis.value = tiktok.value[1][6];
        break;
      case "腾讯应用":
        applicationAnalysis.value = tiktok.value[1][7];
        break;
    }
  } else if (month.value == "三月") {
    switch (mess) {
      case "今日头条":
        applicationAnalysis.value = tiktok.value[0][0];
        break;
      case "华为":
        applicationAnalysis.value = tiktok.value[0][1];
        break;
      case "腾讯应用":
        applicationAnalysis.value = tiktok.value[0][2];
        break;
      case "字节跳动CDN":
        applicationAnalysis.value = tiktok.value[0][3];
        break;
      case "华为CDN":
        applicationAnalysis.value = tiktok.value[0][4];
        break;
      case "腾讯CDN":
        applicationAnalysis.value = tiktok.value[0][5];
        break;
      case "阿里CDN":
        applicationAnalysis.value = tiktok.value[0][6];
        break;
      case "百度CDN":
        applicationAnalysis.value = tiktok.value[0][7];
        break;
    }
  }
};

// 应用分析流量top10分布
const applicationEcharts = reactive({
  legend: {
    show: true,
    // top: 'right',
    orient: "vertical",
    right: 0,
    top: 50,
    bottom: 10,
    textStyle: {
      color: "#B0B0B0",
      fontSize: 12,
    },
    itemHeight: 6,
  },
  tooltip: {
    show: true,
    trigger: "axis",
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
    },
  },
  color: [
    "#028AD7",
    "#EF6640",
    "#FFC100",
    "#627CFF",
    "#2CD6BB",
    "#70AD47",
    "#255E91",
    "#853D0C",
    "#636363",
    "#997300",
  ],
  series: {
    type: "pie",
    selectedMode: "single",
    center: ["40%", "50%"],
    radius: [24, 60],
    data: applicationAnalysis,
    label: {
      normal: {
        color: "#B0B0B0",
        position: "outside",
        formatter: function (param) {
          return `{a|${param.name}}\n{b|${param.value}%}`;
          // return `{a|${param.place}}\n{b|${param.rate}}`;
        },
        rich: {
          a: {
            align: "center",
            fontSize: 12,
          },
          b: {
            align: "center",
            padding: [2, 0, 0, 0],
            fontSize: 14,
            color: "#FFF",
          },
        },
      },
    },
    itemStyle: {
      label: {
        show: true,
        textStyle: {
          fontWeight: 200,
          fontSize: 10, //⽂字的字体⼤⼩
          color: "#fff",
        },
      },
    },
  },
});

onMounted(() => {});
</script>
<style lang='less' scoped>
.box {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5% 2%;
  .boxleft {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .topMessageTitle {
      margin-bottom: 30px;
    }
    .basic-info-part {
      width: 100%;
      height: 20%;

      .IDC-basic-info {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .squareSection {
          margin-right: 80px;
        }
      }
    }
    .use-rate-part {
      .circle-rate-section {
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }

    .topMessage,
    .centenMessage {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .topMessageTitle,
      .centenMessageTitle {
        display: flex;
        align-items: center;
      }
    }
    .centenMessage {
      width: 100%;
      height: 30%;
      .centenMessageCenten {
        width: 100%;
        height: 80%;
        .selece {
          width: 15%;
          height: 15%;
          background: #004064;
          border-radius: 2px 2px 2px 2px;
          float: right;
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            cursor: pointer;
            font-size: 14px;
            color: #d6e3ea;
          }
          span:nth-child(2) {
            margin: 0 4px;
          }
          span:first-child:active,
          span:last-child:active {
            color: #00a3ff;
          }
        }
        .centenClass {
          color: #d6e3ea;
          font-size: 12px;
          // background: #bfa;
          width: 100%;
          height: 18%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: center;
          margin-top: 9%;
          .centenBorder {
            width: 15%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #028cda;
            // box-shadow: inset 0px 1px 2px 1px #028cda,
            //   inset 0px -1px 2px 1px #028cda;
            border-radius: 2px 2px 2px 2px;
            img {
              width: 18px;
              margin: 0 2px;
            }
            span {
              width: 60%;
            }
          }
        }
        .centenBottom {
          margin-top: 3%;
          width: 100%;
          // background: red;
          height: 50%;
          .centenBottomText {
            width: 100%;
            height: 50%;
            display: flex;
            span {
              text-align: center;
              display: flex;
              width: 20%;
              font-size: 12px;
              color: #bac6cc;
              justify-content: center;
              align-items: center;
              background: #111520;
              border: 1px solid rgba(2, 140, 218, 0.4);
              border-radius: 2px 2px 2px 2px;
              margin: 0px -1px -1px 0px;
            }
          }
        }
      }
    }
    .bottomCharts {
      display: flex;
      width: 100%;
      height: 40%;
      flex-direction: column;
      justify-content: space-between;
      .echatsTitle {
        width: 100%;
      }
      .echartsAll {
        width: 100%;
        height: 75%;
        .erts {
          margin-top: 8%;
          height: 88%;
          width: 100%;
        }
      }
    }
  }
  .boxCentenMap {
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .map {
      width: 98%;
      margin: 0 auto;
      height: 65%;
    }
    .mapBottom {
      /*width: 65%;*/
      // width: 80%;
      margin: 0 auto;
      height: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .mapBottomList {
        width: 100%;
        /*height: 60%;*/
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        .squareSection {
          margin: 0 64px 30px 0;
          /*margin-right: 80px;*/
          /*margin-right: 80px;*/
          &:nth-of-type(2),
          &:nth-of-type(4) {
            margin-right: 0;
          }
          &:nth-of-type(3),
          &:nth-of-type(4) {
            margin-bottom: 0;
          }
        }
      }
    }
  }
  .boxRight {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .rightTopMessage {
      width: 100%;
      height: 35%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .rightCenten {
      width: 100%;
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      // background: #bfa;
      .security {
        width: 100%;
        height: 80%;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid rgba(2, 140, 218, 0.4);
        .tableTitle {
          height: 15%;
          border-bottom: 1px solid rgba(2, 140, 218, 0.4);
          span {
            text-align: center;
            display: block;
            width: 10%;
            font-size: 13px;
            color: #028cda;
          }
          span:first-child {
            width: 20%;
          }
        }
        .tableBorder {
          width: 100%;
          height: 85%;
          overflow: auto;
        }
        .tableCenten {
          height: 12.1%;
          border-bottom: 1px solid rgba(2, 140, 218, 0.4);
          span {
            text-align: center;
            display: block;
            width: 10%;
            font-size: 12px;
            color: #d6e3ea;
          }
          span:first-child {
            width: 20%;
          }
        }
        .tableTitle,
        .tableCenten {
          display: flex;
          align-items: center;
          justify-content: space-evenly;
        }
      }
    }
    .rightBottom {
      width: 100%;
      height: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .lastSelest {
        width: 100%;
        // height: 20%;
      }
      .tenant {
        width: 100%;
        height: 65%;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid rgba(2, 140, 218, 0.4);
      }
    }
  }
}
::-webkit-scrollbar {
  width: 2px;
  height: 6px;
  background-color: transparent;
}
/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px #bfa; */
  border-radius: 10px;
  background-color: #222837;
}
/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb {
  width: 1px;
  height: 10px;
  border-radius: 10px;
  background-color: #028cda;
}
</style>

